<!--
  在使用该组件进行图片上传时，每次只能选择或拖拽一个图片文件
-->
<script setup>
import {ref} from 'vue'

/**
 * 接收父组件传递的参数
 */
const props = defineProps({
  // 小尾巴身份证正面图片上传组件大小，指定组件的高度，组件的宽高比为 1.58:1
  idCardUploadSize: {type: String, default: '10rem'},
  // 骨架背景图片 url，取值示例：'url(图片路径)'
  skeletonImgUrl: {type: String, default: ''},
  // 图标大小
  iconSize: {type: String, default: '2rem'},
  // 标题
  title: {type: String, default: '请上传国徽面照片'},
  // 标题文本文字大小
  titleFontSize: {type: String, default: '1rem'},
  // 标题下的提示文本
  tip: {type: String, default: '支持 JPG JPEG PNG 格式图片'},
  // 标题下的提示文本文字大小
  tipFontSize: {type: String, default: '0.7rem'},
  // 文件输入框 title 内容(鼠标悬浮时的提示文本)
  fileInputTitle: {type: String, default: ''},
  // 文件输入框 input 接收到文件后的文件处理函数，
  // 调用该函数时，会传入文件对象
  // 如果需要启用上传图片回显，该函数需要返回一个对象
  // {imgUrl: 图片上传后的回显 url(String), status: 图片上传后的状态(Boolean, true 成功 false 失败)}
  fileHandler: {
    type: Function, default: () => {
    }
  },
  // 是否开启上传图片回显
  enableImgShow: {type: Boolean, default: true},
})

/**
 * 选择完成文件或拖拽文件后的处理
 */
// 文件上传 input 元素引用
const fileUploadIptRef = ref(null)
// 文件上传 input 元素接收到的文件对象
let file = null
// 接收上传图片的回显 url
const imgUrl = ref('')
// 图片上传后的状态
const status = ref(false)
// 接收到文件后的处理
function fileIptChange() {
  // 得到文件上传 input 元素接收到的文件
  // 默认情况下文件上传 input 元素只能接收一个文件
  file = fileUploadIptRef.value?.files[0]
  // 调用文件处理函数
  const res = props.fileHandler(file)
  // 图片上传后的回显 url
  imgUrl.value = res?.imgUrl
  // 图片上传后的状态
  status.value = res?.status
}

const fileVal = ref(null)
</script>

<template>
  <!-- 身份证正面图片上传组件 -->
  <div
      class="tail-id-card-upload-front"
      :style="{
        '--tail-id-card-upload-box-height': idCardUploadSize,
        background: `${skeletonImgUrl} no-repeat 50%`,
        backgroundSize: 'contain',
      }"
  >
    <!-- 文件上传前组件显示元素 -->
    <div class="tail-id-card-upload-front-before-upload">
      <!-- 身份证正面图片上传组件图标 -->
      <div
          class="tail-id-card-upload-front-icon"
          :style="{'--tail-id-card-upload-icon-size': iconSize}"
      >
        <slot name="icon">
          <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="3883" width="200" height="200">
            <path
                d="M973.609745 750.236863 853.432379 750.236863 853.432379 630.039569c0-26.709513-20.033381-46.743891-46.743891-46.743891s-46.743891 20.034377-46.743891 46.743891l0 126.87542L626.391052 756.914989c-26.709513 0-46.743891 20.033381-46.743891 46.743891s20.033381 46.743891 46.743891 46.743891l126.87542 0 0 126.855492c0 26.709513 20.033381 46.743891 46.743891 46.743891 26.709513 0 46.743891-20.034377 46.743891-46.743891L846.754254 850.40277 973.609745 850.40277c26.711506 0 46.743891-20.032384 46.743891-46.743891C1027.031761 776.949366 1000.322248 750.236863 973.609745 750.236863L973.609745 750.236863 973.609745 750.236863zM505.222231 871.609954 505.222231 871.609954 87.137882 871.609954c-15.500585 0-27.135989-11.634407-27.135989-27.175846l0-759.112174c0-15.511546 11.635403-27.145953 27.135989-27.145953l740.858431 0c15.47966 0 27.11606 11.635403 27.11606 27.145953l0 410.313131 0 0 0 0c0 15.500585 11.656329 27.136985 27.176843 27.136985 15.499589 0 27.135989-11.6364 27.135989-27.136985l0 0 0 0L909.425205 58.176977c0-31.031064-27.135989-58.178014-58.177017-58.178014L60.000897-0.001036C28.979797-0.001036 1.82388 27.145913 1.82388 58.176977l0 813.432977c0 31.001171 27.155918 58.157088 58.177017 58.157088l445.221334 0 0 0c15.499589 0 27.135989-11.656329 27.135989-27.155918C532.356226 883.224433 520.720823 871.609954 505.222231 871.609954L505.222231 871.609954 505.222231 871.609954zM499.513639 736.881608c20.033381-40.065765 66.777271-66.777271 113.521162-66.777271l53.42102 0 0-60.098149c0-53.422016 33.389632-100.165907 80.132526-120.198291l0 0 0 0-66.776275-200.319857-233.718457 300.485763-66.777271-106.843036L132.261565 736.881608 499.513639 736.881608 499.513639 736.881608 499.513639 736.881608zM379.316344 309.51046c0-40.054804-33.388636-73.444436-73.453404-73.444436s-73.454401 33.389632-73.454401 73.444436c0 40.066761 33.388636 73.454401 73.454401 73.454401S379.316344 349.577221 379.316344 309.51046L379.316344 309.51046 379.316344 309.51046z"
                p-id="3884"
            ></path>
          </svg>
        </slot>
      </div>
      <!-- 身份证正面图片上传组件标题 -->
      <div
          class="tail-id-card-upload-front-title"
          :style="{fontSize: titleFontSize}"
      >
        <slot name="title">
          <p>{{ title }}</p>
        </slot>
      </div>
      <!-- 身份证正面图片上传组件提示 -->
      <div
          class="tail-id-card-upload-front-tip"
          :style="{fontSize: tipFontSize}"
      >
        <slot name="tip">
          <p>{{ tip }}</p>
        </slot>
      </div>
      <!-- 实现点击上传文件 -->
      <input
          ref="fileUploadIptRef"
          class="tail-id-card-upload-front-click"
          type="file"
          :value="fileVal"
          :title="fileInputTitle"
          @change="fileIptChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
/*
 * 身份证正面图片上传组件
 * 身份证长宽比 1.58:1
 */
.tail-id-card-upload-front {
  height: var(--tail-id-card-upload-box-height);
  width: calc(var(--tail-id-card-upload-box-height) * 1.58);
  //background: var(--tail-id-card-upload-front-skeleton-img-url) no-repeat 50%;
  //background-size: contain;
  user-select: none;

  /*
   * 文件上传前组件显示元素
   */
  .tail-id-card-upload-front-before-upload {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /*
     * 身份证正面图片上传组件图标
     */
    .tail-id-card-upload-front-icon {
      width: var(--tail-id-card-upload-icon-size);
      height: var(--tail-id-card-upload-icon-size);

      svg {
        width: 100%;
        height: 100%;

        path {
          // 修改 svg 的颜色
          fill: var(--tail-id-card-upload-icon-color);
        }
      }
    }

    /*
     * 身份证正面图片上传组件标题
     */
    .tail-id-card-upload-front-title {
      margin: 1rem 0 0.5rem;
      color: var(--tail-id-card-upload-title-color);
    }

    /*
     * 身份证正面图片上传组件提示
     */
    .tail-id-card-upload-front-tip {
      color: var(--tail-id-card-upload-tip-color);
    }

    /*
     * 点击上传文件
     */
    .tail-id-card-upload-front-click {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
  }
}
</style>